<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="18">
          <el-input v-model="form.user_id" placeholder="用户id"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="onSubmit" :loading="button_loading">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <ul class="search-result" v-if="search_result.length!==0">
      查询结果
      <!--{{search_result.length===0}}-->
      <li v-for="item in search_result" @click="add(item.user_id)">
        id：{{item.user_id}} &nbsp&nbsp&nbsp{{item.name}}
        <i class="el-icon-plus"><span v-if="isgroup">邀请</span><span v-else>添加好友</span></i>
      </li>
    </ul>
    <!--<span @click="Init">测试触发好友列表按钮</span>-->
    <ul class="friend-apply" v-if="friend_apply.length!==0">
      好友请求
      <li v-for="item in friend_apply" @click="goto(item.user_id)">
        id：{{item.user_id}} &nbsp&nbsp&nbsp{{item.name}}
        <i class="el-icon-circle-check" @click.stop="agree(item.user_id)"></i>
        <i class="el-icon-circle-close" @click.stop="refuse(item.user_id)"></i>
      </li>
    </ul>
  </div>
</template>
<script>
  import { groupInvite, friendAdd, friendAgree, friendRefuse, friendSearch, friendApplyRead } from '@/public/api'

  export default {
    props: {isgroup: {default: false}, group_id: {default: ''}},
    data () {
      return {
        form: {
          user_id: ''
        },
        button_loading: false,
        search_result: [
//          {
//            name: '',
//            user_id: null
//          }
        ],
        friend_apply: [
          {
            name: '朋友申请1',
            user_id: 11
          },
          {
            name: '朋友申请2',
            user_id: 12
          }
        ]
      }
    },
    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    },
    created () {
      this.Init()
    },
    watch: {
      User_id (old, newval) {
        this.Init()
      }
    },
    methods: {
      search () {
        this.search_result.length = 0
        friendSearch({
          search_id: this.form.user_id
        }).then(
          data => {
            for (let i = 0; i < data.length; i++) {
              let a = {
                name: data[i].user_basic.name,
                user_id: data[i].user_basic.user_id
              }
              this.search_result.push(a)
            }
          }
        )
      },
      add (item) {
        if (this.isgroup) {
          groupInvite({
            invite_id: item,
            group_id: this.group_id,
            user_id: +this.User_id
          }).then(
            data => {
              if (data.status) {
                this.$message('邀请加入群组已经发送')
                this.$emit('close')
                this.search_result = []
              }
            }
          ).catch()
        } else {
          console.log(item)
          friendAdd({
            friend_id: item,
            user_id: this.User_id
          }).then(data => {
            if (data.status) {
              this.$message('添加好友请求请求已经发送')
              this.$emit('close')
              this.search_result = []
            }
          })
        }
      },
      Init () {
        this.friend_apply.length = 0
        friendApplyRead({user_id: this.User_id})
          .then(
            data => {
              let content = data.data
              for (let i = 0; i < content.length; i++) {
                let a = {
                  name: content[i].user_basic.name,
                  user_id: content[i].user_basic.user_id
                }
                this.friend_apply.push(a)
              }
            }
          )
      },
      agree (item) {
        friendAgree({
          user_id: this.User_id,
          friend_id: item
        }).then(data => {
          if (data.status) {
            this.$message.success(`${item}同意成功`)
            this.$emit('close')
            this.friend_apply = this.friend_apply.filter(function (value) {
              return value.user_id !== item
            })
          }
        })
      },
      refuse (item) {
        friendRefuse({
          user_id: this.User_id,
          friend_id: item
        }).then(data => {
          if (data.status) {
            this.$message.success(`${item}拒绝成功`)
            this.$emit('close')
            this.friend_apply = this.friend_apply.filter(function (value) {
              return value.user_id !== item
            })
          }
        })
      },
      goto (item) {
        console.log(item, '去看她的首页')
      },
      onSubmit () {
        this.search()
      }
    }

  }

</script>
<style scoped>
  ul {
    border-top: 1px solid black;
    padding-top: 5px;
    /*border-bottom: 1px solid black;*/
  }

  li {
    text-align: left;
    height: 20px;
    margin: 10px 0;
    /*background: red;*/
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 5px;
  }

  li:hover {
    border: 1px solid black;
    cursor: pointer;
  }

  li i {
    float: right;
    line-height: 20px;
    margin: 0 10px;
  }

  i:hover, .search-result li:hover i {
    color: #0f49ee;
  }
</style>
